<template>
  <div class="csj-model">
    <Drawer
      title="添加宣教"
      width="60%"
      v-model="isShowModel"
      @on-close="close"
    >
      <Form :model="formItem" :label-width="120">
        <Form-item label="所属类别：">
            <Select v-model="formItem.class_id" clearable style="width: 200px">
                <Option v-for="item in paeClassList" :value="item.id" :key="item.id">
                    {{ item.title }}
                </Option>
        </Select>
        </Form-item>
        <Form-item label="标题：">
          <Input v-model="formItem.title" placeholder="请输入"></Input>
        </Form-item>
        <Form-item label="文件类型：">
            <Select v-model="formItem.media_type" clearable style="width: 200px">
                <Option v-for="item in mediaType" :value="item.value" :key="item.value">
                    {{ item.label }}
                </Option>
        </Select>
        </Form-item>
        <FormItem label="图片/视频：">
          <div class="h100 w100">
            <div class="csj-singe-upload wpx100 ">
              <csj-upload :isCut="false" v-model="formItem.content">
                <div class="csj-image-add" v-if="!formItem.content">
                  <Icon type="ios-add" class="f80" />
                </div>
                <img :src="imagePrefix(formItem.content)" v-if="formItem.content && formItem.media_type == 'm'"/>
                <div v-if="formItem.content && formItem.media_type == 'v'">
                视频暂不支持预览
                </div>
              </csj-upload>
            </div>
          </div>
        </FormItem>
      </Form>
      <div class="csj-drawer-footer">
        <Button @click="close">取消</Button>
        <Button @click="confirm" type="primary" class="ml10">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script lang="ts" src="./pae-add.ts"></script>